<?php
	$id = intval($_GET['id']);
	//$id = 8338;
	$result = mysql_query("select * from {$config['page']} where id=$id");
	$row = mysql_fetch_assoc($result);
	$img = @$row['image_url'];
	if (!$img) $img = $row['img_src'];
	
	
?>

<html>
<head>
<style>
html, body, table, thead, tbody, tr, td, img {
	margin: 0px;
	padding: 0px;
}

table, thead, tbody, tr, td, img {
	border: 0px;
}

.ic {
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	background-image:url("<?php echo $img; ?>");
}

#result {
	position: absolute;
	top: 0px;
	left:500px;
	/*border: 1px solid black;*/
}
</style>
<script type='text/javascript' src='/ctl/static/jquery.js'></script>
<script type='text/javascript'>
$(function() {
	$('.ic').live('click', function(event) {
		$height = parseInt($(this).attr('height'));
		$width = parseInt($(this).attr('width'));
		$bp = parseInt($(this).attr('bp'));
		
		$firstH = parseInt(event.pageY - $bp);
		$secondH = parseInt($height - $firstH - $bp);
		
		$newBp = parseInt(event.pageY + $bp);
		
		//alert('Мы кликнули по отступу: ' + event.pageY + ' от верха. До этого уже было отрезано ' + $bp + 'px. Была картинка размером ' + $width +'x'+$height+', стала '+$width+'x'+$secondH+', а новый отступ - '+$newBp+'px');
		
		$html = "<tr><td bp='"+$newBp+"' style='background-position: 0px -"+$newBp+"px;' class='ic' width="+$width+" height="+$secondH+">&nbsp;</td></tr>";
		$("#map").html($html);
		
		//alert('Справа появится картинка размером '+$width+'x'+event.pageY+', отступ '+$bp+'px передался с прошлого клика');
		
		$top = "<table><tr><td class='ic' width="+$width+" height="+event.pageY+" style='background-position: 0px -"+$bp+"px;'>&nbsp;</td></tr></table>";
		$("#result").append($top);
		
		$("#form").append("<input type='text' name='sizes[]' value='"+$width+"x"+event.pageY+","+$bp+"'></input><br>");
		
		$(this).parent().parent().html($html);
		//alert('ClientX:'+event.clientX+', clientY'+event.clientY+', pageX'+event.pageX+', pageY'+event.pageY+', screenX'+event.screenX+', screenY'+event.screenY);
	
	});
});
</script>	

<script type='text/javascript'>
var pic_real_width, pic_real_height;
$(function() {
	$("<img/>") // Make in memory copy of image to avoid css issues
		.attr("src", "<?php echo $img; ?>")
		.load(function() {
		    pic_real_width = this.width;   // Note: $(this).width() will not
		    pic_real_height = this.height; // work for in memory images.
		    
		    $(".ic").attr("width", pic_real_width);
		    $(".ic").attr("height", pic_real_height);
	});
});
</script>

</head>
<body>

<div id='result'></div>

<table id='map'>
<tbody>
<tr>
<td class='ic' bp='0'>
&nbsp;
</td>
</tr>
</tbody>
</table>

<br /><br />
<form method='post' id='form'>
<p>Доп. описание: <input type='text' name='image_text' value='' /></p>
<input type='hidden' name='id' value='<?php echo $id; ?>' />
<input type='submit' name='done' value='Я закончил' title='Все картинки справа идут в репост одним постом. Все что осталось слева - исчезает' /><br />
</form>
		

</body>
</html>


